import React from 'react'
import {Card} from 'antd'
import echartTheme from './../themeLight'
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactCharts from 'echarts-for-react'
export default class Bar extends React.Component{
    componentWillMount(){
        echarts.registerTheme('tomarow',echartTheme)
    }
    getOption =()=>{
        let option={
            title : {
                text: '用户骑行订单'
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis : [
                {
                    data : ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                }
            ],
            yAxis:{
                type:'value'
            },
            series : [
                {
                    name: '订单数量',
                    type: 'line',
                    data:[
                       1000,1500,3000,3200,2300,4100,5300
                    ]
                }
            ]
        }
        return option;
    }
    getOption2 =()=>{

        let option={
            title : {
                text: '用户骑行订单',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend:{
                data:["Ofo订单数量","摩拜订单数量"]
            },
            xAxis : [
                {
                    data : ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                }
            ],
            yAxis:{
                type:'value'
            },
            series : [
                {
                    name: 'Ofo订单数量',
                    type: 'line',
                    data:[
                        1000,1500,3000,3200,2300,4100,5300
                    ]
                },
                {
                    name: '摩拜订单数量',
                    type: 'line',
                    data:[
                        1200,1400,3400,3100,2400,4200,5200
                    ]
                }
            ]
        }
        return option;
    }
    getOption3 =()=>{
        let option={
            title : {
                text: '用户骑行订单'
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis : {
                    type: 'category',
                    boundaryGap: false,
                    data : ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                },
            yAxis:{
                type:'value'
            },
            series : [{
                    name: '订单数量',
                    type: 'line',
                    data:[
                        1000,1500,3000,3200,2300,4100,5300
                    ],
                    areaStyle: {}
                }
            ]
        }
        return option;
    }
    render(){
        return(
            <div>
                <Card title="折线图表之一">
                    <ReactCharts option={this.getOption()} theme="tomarow" style={{height:500}}/>
                </Card>
                <Card title="折线图表之二" style={{marginTop:"10px"}}>
                    <ReactCharts option={this.getOption2()} theme="tomarow" style={{height:500}}/>
                </Card>
                <Card title="折线图表之三" style={{marginTop:"10px"}}>
                    <ReactCharts option={this.getOption3()} theme="tomarow" style={{height:500}}/>
                </Card>
            </div>
        )
    }
}